{include file="pub/header" /}
	<div class="body">
		<div class="system">
			<div class="item">
				<ul>
					<li><b>日期</b><span>2017-01-01</span></li>
					<li><b>用户新增</b><span>4523</span></li>
					<li><b>注册用户</b><span>686</span></li>
					<li><b>每日访问</b><span>743</span></li>
					<li><b>流失</b><span>10%</span></li>
				</ul>
			</div>
			<div class="item">
				<ul>
					<li><b>日期</b><span>2017-01-01</span></li>
					<li><b>用户新增</b><span>4523</span></li>
					<li><b>注册用户</b><span>686</span></li>
					<li><b>每日访问</b><span>743</span></li>
					<li><b>流失</b><span>10%</span></li>
				</ul>
			</div>
			<div class="item">
				<ul>
					<li><b>日期</b><span>2017-01-01</span></li>
					<li><b>用户新增</b><span>4523</span></li>
					<li><b>注册用户</b><span>686</span></li>
					<li><b>每日访问</b><span>743</span></li>
					<li><b>流失</b><span>10%</span></li>
				</ul>
			</div>
		</div>
		<div class="census">
			<div class="item">
				<p class="word">小标题</p>
				<p class="num">123456</p>
				<p class="info">简介</p>
			</div>
			<div class="item">
				<p class="word">小标题</p>
				<p class="num">123456</p>
				<p class="info">简介</p>
			</div>
			<div class="item">
				<p class="word">小标题</p>
				<p class="num">123456</p>
				<p class="info">简介</p>
			</div>
			<div class="item">
				<p class="word">小标题</p>
				<p class="num">123456</p>
				<p class="info">简介</p>
			</div>
		</div>
		<div class="control">
			<div class="broken">
				<div id="broken"></div>
			</div>
			<div class="sector">
				<div id="sector"></div>
			</div>
		</div>
		<script type="text/javascript" src="/static/echarts/echarts.min.js"></script>
		<script type="text/javascript">
	        // 基于准备好的dom，初始化echarts实例
	        var myChart1 = echarts.init(document.getElementById('broken'));
	        // 指定图表的配置项和数据
			option1 = {
				title:{
					text:"标题",
					textStyle:{
						// color:"#009688",
						color:"#405A75",
						fontWeight:"normal",
						fontFamily:"Microsoft YaHei",
					},
					left:"center",
				},
				tooltip: {
					trigger:"axis",
					textStyle:{
						// color:"#fff",
					}
				},
			    xAxis: {
			        type: 'category',
			        name:"时间",
			        data: ['节点1', '节点2', '节点3', '节点4', '节点5', '节点6', '节点7', '节点8', '节点9', '节点10'],
			    },
			    yAxis: {
			        name:"访问数量"
			    },
			    series: [
			    	{
				    	name:"新增数",
				    	type:"line",
				    	itemStyle:{
				    		color:"#199F93"
				    	},
				    	lineStyle:{
				    		color:"#199F93"
				    	},
				    	smooth:true,
				    	data: [459198,256867,395802,100111,256867,315703,352021,395802,255129,118498],
				    },
				    {
				    	name:"访问数",
				    	type:"line",
				    	itemStyle:{
				    		color:"#4F4D82"
				    	},
				    	lineStyle:{
				    		color:"#4F4D82"
				    	},
				    	smooth:true,
				    	data: [256867,395802,100111,256867,315703,352021,395802,255129,118498,459198],
				    }
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        myChart1.setOption(option1);

	        var myChart2 = echarts.init(document.getElementById('sector'));
	        option2 = {
			    title : {
			        text: '某站点用户访问来源',
			        textStyle:{
						color:"#405A75",
						fontWeight:"normal",
						fontFamily:"Microsoft YaHei",
					},
			        left:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            data:[
			                {value:335, name:'直接访问'},
			                {value:310, name:'邮件营销'},
			                {value:234, name:'联盟广告'},
			                {value:135, name:'视频广告'},
			                {value:1548, name:'搜索引擎'}
			            ],
			        }
			    ]
			};
			myChart2.setOption(option2);
	    </script>
	    
	</div>
{include file="pub/footer" /}
